<template>
  <div class="mv">
     <div class="mv-video ">
		 <span>MV</span>
		 <h3>{{mvDetail.name}}</h3>
		 <video :src="mvUrl" controls="controls" autoplay="autoplay" width='100%'>
		 </video>
		 <div class="comment">
			 <comment :commentsList="commentsList"></comment>
			    <el-pagination
			       @size-change="handleSizeChange"
			       @current-change="handleCurrentChange"
			       :current-page="commentParam.offset"
			       :page-sizes="[20, 30, 40,50]"
			       :page-size="commentParam.limit"
			       layout="total, sizes, prev, pager, next, jumper"
			       :total="total">
			     </el-pagination>
		 </div>
	 </div>
	 <div class="mv-int">
		 <h3>MV介绍</h3>
		 <div class="mv-time">发布时间: {{mvDetail.publishTime}}</div>
		 <div class="mv-count">播放次数: {{mvDetail.playCount}}次</div>
		 <p>简介: {{mvDetail.desc}}</p>
		 <div class="mv-recommend">
			 <div style="font-size: 18px;">相关推荐</div>
			<div  class="mv-list-item" v-for="(item,index) in mvsList" :key="index" style="display: flex;">
			 	<div class="mv-center">
			 	    <el-image :src="item.cover"  @click="mvHandle(item.id)"></el-image>
			 	    <div class="mv-center-icon">
			 	  	  <i class="iconfont icon-shipin"></i>
			 	  	  <span>{{item.playCount}}</span>
			 	    </div>	   
			 	</div>
				<div class="mv-right">
					
					<div><span>MV</span>{{item.name}}</div>
				</div>
			 </div>
		 </div>
	 </div>
  </div>
</template>

<script>
import {_getDetailMv,_getUrlMv,_getSimiMv,_getCommentMv} from 'network/mv.js'
import Comment from '../list-detail/childsPage/comment.vue'
export default {
  name:'MvDetail',
  components:{Comment},
  data(){
    return{
		mvId:0,
		mvDetail:{},
		mvUrl:null,
		mvsList:[],
		commentParam:{
			offset:1,
			limit:20,
		},
		commentsList:[],
		total:null
    }
  },
  created(){
	 //this.mvId=this.$route.params.id
	this.getList();
  },

  methods:{
	 getList(){
		let mvId= this.$route.params.id
		 const params ={mvid:mvId} 
		 _getDetailMv(params).then(res=>{
			 this.mvDetail = res.data.data
		 })
		const paramsUrl ={id:mvId} 
		 _getUrlMv(paramsUrl).then(res=>{
		    this.mvUrl = res.data.data.url
		 })
		 _getSimiMv(params).then(res=>{
			 this.mvsList = res.data.mvs
		 })
		 this.getCommentMv()
	 },
	 getCommentMv(){
		 this.commentParam.id=this.$route.params.id
		 _getCommentMv(this.commentParam).then(res=>{
		 	this.commentsList = res.data.comments
		 	this.total = res.data.total
		 })
	 },
	 handleSizeChange(val){
		   this.commentParam.offset = 1;
		   this.commentParam.limit = val;
		   this.getCommentMv();
	 },
	 handleCurrentChange(val){
		this.commentParam.offset = val;
		this.getCommentMv();
	 },
	 mvHandle(id){
	 		 this.$router.push({name:'MvDetail',params:{id:id}})
	 }
  }
}
</script>

<style lang="less" scoped>
	.mv{
		padding: 10px  10px 0 60px;
		display: flex;
	}
.mv-video{
	width: 70%;
	span{
		display: inline-block;
		width: 40px;
		height: 30px;
		line-height: 30px;
		border: 1px solid #FF0000;
		text-align: center;
		border-radius: 4px;
	}
	h3{
		display: inline-block;
	}
	video{
		display: block;
		margin-top: 18px;
		
		height: 300px;
	}
}
.mv-int{
	font-size: 14px;
	width: 26%;
	padding: 0 10px;
	.mv-time{
		text-align: left;
		padding-top: 10px;
	}
	.mv-count{
		text-align: right;
		padding-bottom: 10px;
	}
}
.mv-recommend{
	margin-top: 20px;

	.mv-center{
		position: relative;
		margin-top: 10px;
		width: 150px;
		.mv-center-icon{
			position: absolute;
			top: 0;
			right:4px;
			color: #FFFFFF;
		}
	}
	.mv-right{
		width: 100px;
		overflow: hidden;
		margin-top: 10px;
		margin-left: 4px;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		span{
			display: inline-block;
			width: 36px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #FF0000;
			text-align: center;
			border-radius: 4px;
		}
	}
}

</style>